<template>
    <div >
        <div class="header">
            <image class="header-left-img" :src="titleLeftImg" @click="editControl.finish()"/>
            <text class="header-center-text">基本信息</text>
            <text class="header-right-text" @click="editControl.save()">保存</text>
        </div>
        <scroller>
            <div class="content">
                <div class="box-max"> 
                    <div class="box-max-left">
                        <div class="box-max-left-top">
                            <div class="title"><text class="box-text">姓名:</text></div>
                            <div class="input">
                                <input type="text" class="input-text" v-model="saveData.userName"></input>
                            </div>
                        </div>
                        <div class="box-max-left-bottom">
                            <div class="title"><text class="box-text">性别:</text></div>
                            <div class="checkbox" :class="[saveData.gender== '0'?'checkbox-active':'']" @click="saveData.gender='0'">
                                <text class="checkbox-text" :class="[saveData.gender=='0'?'checkbox-text-active':'']">男</text>
                            </div>
                            <div class="checkbox mf-10" :class="[saveData.gender=='1'?'checkbox-active':'']" @click="saveData.gender='1'">
                                <text class="checkbox-text" :class="[saveData.gender=='1'?'checkbox-text-active':'']">女</text>
                            </div>
                        </div>
                    </div>                           
                    <div class="box-max-right">
                        <div class="box-max-right-box" @click="editControl.getIdcard">
                            <image :src="idcardImg" class="box-max-right-box-img"/>
                            <text class="box-max-right-box-text">身份证识别</text>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="line">
                        <div class="title"><text class="box-text">年龄:</text></div>
                        <div class="input">
                            <input type="text" class="input-text" v-model="saveData.age"></input>
                        </div>
                    </div>
                    <div class="line">
                        <div class="title"><text class="box-text">电话:</text></div>
                        <div class="input">
                            <input type="text" class="input-text" v-model="saveData.mobile"></input>
                        </div>
                    </div>
                </div>

                <div class="box" v-if="! iscomebyself" ref="addressitem">
                    <div class="line-textarea">
                        <div class="title-textarea"><text class="box-text">呼救地址:</text></div>
                        <input class="textarea" v-model="saveData.address" @input="editControl.onInputFBAddress"></input>
                    </div>
                </div>
                <div class="box-1line-list" v-if="ishjaddressshow">
                    <text class="line-text"></text>
                    <div class="line-input-list">
                        <div style="margin-left: 2px;margin-top: 2px;margin-bottom: 2px" v-for="item in listData" @click="editControl.setFBAddress(item)">
                            <text>{{item.name}}</text>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="line-textarea">
                        <div class="title-textarea"><text class="box-text">主诉:</text></div>
                        <input class="textarea" v-model="saveData.chiefComplaint"></input>
                    </div>
                </div>
                <div class="box">
                    <div class="line-textarea">
                        <div class="title-textarea"><text class="box-text">病史:</text></div>
                        <input class="textarea" v-model="saveData.history"></input>
                    </div>
                </div>
            </div>
        </scroller>
        
    </div>
</template>
<script>
    import EMNewMainEditControl from "./EMNewMainEditControl";
    import Resource from "../../../dist/res/Resource";
    import DateUtil from "../../common/util/DateUtil"

    export default {
        name: 'EMNewMainEditInfo',
        data: function () {
            return {
                titleLeftImg:"title_cha_img.png",
                idcardImg:"idcard_img.png",
                editControl:"",
                ishujiu: 0,
                IS_ATTACK_ZONE_TIME: false,
                isNullAttackDetailTime: '',
                ishjaddressshow:false,
                issetaddressing:false,
                listData:[],
                saveData:{
                    carOutId:"",
                    id:"",
                    userName:"",
                    gender:"0",
                    age:"",
                    mobile:"",
                    address:"",
                    chiefComplaint:"",
                    history:""
                },
                iscomebyself:false,
            }

        },
        mounted:function () {
            var instance = this;
            instance.editControl = new EMNewMainEditControl(instance);
        }
    }
</script>
<style>
    .header {
        position: relative;
        height: 40px;
        background-color: #FFF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 0.5px;
        border-bottom-color: #ccc;
    }
    .header-left-img {
        width: 30px;
        height: 30px;
        margin-left: 20px;
    }
    .header-center-text {
        font-size: 13px;
        color: #666;
    }

    .header-right-text {
        border-style:solid;
        border-color: #4c7fd8;
        border-radius: 5px;
        border-width:1px;
        font-size: 13px;
        margin-right: 20px;
        color: #fff;
        background-color: #4c7fd8;
        width: 65px;
        height: 25px;
        line-height: 25px;
        text-align: center;
    }

    .content {
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 20px;
        padding-bottom: 20px;
        box-sizing: border-box;
    }
    .box {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;   
        height: 40px;
        align-items: center;
    }
    .box-textarea {
        flex: 1;
        display: flex;
        margin-top: 15px;
        flex-direction: row;
        justify-content: flex-start;   
        height: 60px;       
    }
    .box-max {
        flex: 1;
        display: flex;
        flex-direction: row;
        height: 90px;
        justify-content: space-between; 
    }
    .box-max-left {
        flex: 1;
        display: flex;
    }
    .box-max-right {
        flex: 1;
        box-sizing: border-box;
    }
    .box-max-right-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: #f2f2f2;
        height: 70px;
        border-radius: 3px;
        margin-right: 70px;
        margin-top: 5px;
    }
    .box-max-right-box-img{
        width: 40px;
        height: 26px;
        margin-right: 10px;
    }
    .box-max-right-box-text{
        color:#999;
        font-size:12px;
    }
    .box-max-left-top {
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }
    .box-max-left-bottom {
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }
    .box-text {
        font-size: 12px;
        color: #999;
    }
    .line {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }

    .line-textarea {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        box-sizing: border-box;
        margin-right: 70px;
    }

    .title {
        width: 80px;
    }

    .title-textarea {
        width: 80px;
        padding-top: 8px;
    }

    .input {
        flex: 1;
        /*box-sizing: border-box;*/
        padding-left: 5px;
        height: 25px;       
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
    }

    .input-text {  
        color: #666;
        line-height: 25px;     
        font-size: 12px;
    }
    
    .checkbox {
        width: 87px;
        height: 25px;
        background-color: #f2f2f2;
        border-radius: 3px;        
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .checkbox-active {
        background-color: #4c7fd8;
    }

    .checkbox-text {
        font-size: 12px;
        color: #666;
    }

    .checkbox-text-active {
        color: #FFF;
    }
    .mf-10 {
        margin-left: 10px;
    }
    .line-bottom {
        flex: 1;
        height: 25px;        
        background-color: #f2f2f2;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .line-bottom-active {              
        background-color: #4c7fd8;       
    }
    .line-bottom-text {
        font-size: 12px;
        color: #666;
    }
    .line-bottom-text-active {        
        color: white;
    }
    .textarea {
        box-sizing: border-box;
        flex: 1;
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
        font-size: 12px;
        height: 25px;
        padding-left: 5px;
    }
    .box-1line-list{
        /*position: absolute;*/
        flex-direction: row;
        margin-right: 70px;
        /*left: 0;*/
        /*right: 0;*/
    }
    .line-text{
        width: 80px;
        color: #666666;
        font-size: 12px;
    }
    .line-input-list{
        flex: 1;
        background-color: #ffffff;
        border-radius: 5px;
        border-style: solid;
        border-color: #b1b1b1;
        border-width: 0.5px;
    }
</style>

